/* 
-----------------------------------
    : Custom - eCommerce css :
-----------------------------------
*/
.product-bar {
    .product-head {
        p {
            position: relative;
            text-align: center;
            margin-top: -60px;
            margin-bottom: 40px;
        }
    }
}
.ecommerce-sortby {
    margin-bottom: 30px;
    .button-list {
        text-align: right;
        .btn {
            margin-bottom: 0;
        }
    }
}
.ecommerce-pagination {
    p {
        margin-bottom: 0;
    }
    .pagination {
        float: right;
    }
}
.product-slider-box {
    &.product-box-for {
        .product-preview {
            img {
                width: 100%;
            }
            p {
                position: relative;
                text-align: center;
                margin-top: -60px;
                margin-bottom: 50px;
            }
        }
    }
    &.product-box-nav {
        .product-preview {
            img {
                padding: 0 5px;
            }
        }
    }
}
.rating-average {
    span {
        font-weight: 600;
        border-radius: 50%;
        font-size: 18px;
        padding: 15px;
    }
}
.cart-container {
    border: 1px solid $border-color;
    padding: 30px;
    .cart-body {
        border-top: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
        padding: 30px 0 20px;
        margin: 20px 0 30px;
    }
}
.cart-qty {
    width: 750px;
}
.forgot-psw-link {
    text-align: right;
}
.partition {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
    font-weight: 600;    
    hr {
        border-top: 1px solid $border-color;
    }
    h6 {
        position: relative;
        margin-top: -27px;
        span {
            background-color: $white;
            padding: 0 10px;
        }
    }
}
.jp-card {
    .jp-card-front {
         background: $secondary !important;
    }
    .jp-card-back {
         background: $secondary !important;
    }
}

/* My Account CSS */
.ecom-dashboard-widget {
    i {
        font-size: 40px;
        margin-right: 20px;
    }
    h5 {
        font-size: 18px;
        color: $black;
        margin-bottom:5px;
    }
    p {
        margin-bottom: 0;
    }
    &:hover {
        color: $primary;
         h5 {
            color: $primary;
        }
    }
}
.order-box {
    .card-header {
        h5 {
            margin-bottom: 0;
        }
        h6 {
            text-align: right;
        }
    }
    .card-footer {
        h5 {
            margin-bottom: 0;
            font-size: 16px;
        }
        h6 {
            text-align: right;
        }
    }
}
.wallet-box {
    border: 1px solid $border-color;
    padding: 15px;
    margin-top: 60px;
    border-radius: 3px;
    h4 {
        margin-bottom: 0;
    }
    p {
        text-align: right;
    }
}
.ecom-notification-box {
    .media {
        padding: 15px;
        &:hover {
            background-color: rgba(188, 196, 220, 0.1);
        }
        .action-icon {
            width: 46px;
            height: 46px;
            line-height: 38px;
            font-weight: 600;
            border-radius: 50%;
            font-size: 18px;
            text-align: center;
        }
        h5 {
            font-size: 16px;
            color: $black;
            margin-top: 12px;
            margin-bottom: 5px;
        }
        p {
            margin-bottom: 0;
            span {
                margin-right: 8px;
            }
        }
    }
}
@media (max-width: 1199px) { 
    .ecommerce-sortby {
        .button-list {
            margin-top: 15px;
            text-align: left;
        }
    }
    .ecommerce-pagination {
        p {
            margin-bottom: 15px;
        }
        .pagination {
            float: none;
        }
    }
}
@media (max-width: 767px) { 
    .profilebox {
        img {
            width: 100px;
        }
    }
}
@media (max-width: 575px) { 
    .order-box {
        .card-header {
            h5 {
                text-align: center;
                margin-bottom: 10px;
            }
            h6 {
                text-align: center;
            }
        }
        .card-footer {
            h5 {
                text-align: center;
                margin-bottom: 15px;
            }
            h6 {
                text-align: center;
            }
        }
    }
    .wallet-box {
        h4 {
            text-align: center;
            margin-bottom: 15px;
        }
        p {
            text-align: center;
        }
    }
    .forgot-psw-link {
        text-align: left;
    }
}
@media (max-width: 420px) {
    .jp-card {
        left: -80px;
    }
}